<template>
    <v-dialog :model-value="modelValue" @update:model-value="onDialogUpdate" max-width="600">
        <v-card>
            <v-card-title>
                <v-icon start>mdi-calendar-clock</v-icon>
                {{ roomName }} 占用与空闲详情
            </v-card-title>
            <v-card-text>
                <v-simple-table>
                    <thead>
                        <tr>
                            <th>时间段</th>
                            <th>状态</th>
                            <th>会议主题</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="slot in slots" :key="`${slot.hour}-${slot.segment}`">
                            <td>{{ formatSlotRange(slot) }}</td>
                            <td>
                                <v-chip :color="slot.occupied ? 'error' : 'success'" small>
                                    {{ slot.occupied ? '占用' : '空闲' }}
                                </v-chip>
                            </td>
                            <td>{{ slot.meetingTopic || '-' }}</td>
                        </tr>
                    </tbody>
                </v-simple-table>
            </v-card-text>
            <v-card-actions>
                <v-spacer />
                <v-btn color="primary" @click="closeDialog">关闭</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
export default {
    name: 'SlotDetailDialog',
    props: {
        modelValue: Boolean,
        roomName: String,
        slots: Array
    },
    methods: {
        closeDialog() {
            this.$emit('update:modelValue', false)
            this.$emit('close')
        },
        onDialogUpdate(val) {
            if (!val) this.closeDialog()
        },
        formatSlotRange(slot) {
            const hour = slot.hour.toString().padStart(2, '0')
            const segment = slot.segment || 1
            const start = `${hour}:${((segment - 1) * 10).toString().padStart(2, '0')}`
            let endHour = slot.hour
            let endMinute = segment * 10
            if (endMinute >= 60) {
                endHour += Math.floor(endMinute / 60)
                endMinute = endMinute % 60
            }
            const end = `${endHour.toString().padStart(2, '0')}:${endMinute.toString().padStart(2, '0')}`
            return `${start}-${end}`
        }
    }
}
</script>
